<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
  <script>
    
    const app = Vue.createApp({    
      template:`
      <div>
        <div>
          <input :value="inputValue" @input="input" />
          <button @click="() => add(inputValue)">提交</button>
        </div>
        <ul>
          <li v-for="(item, index) in list" :key="index">{{item}}</li>
        </ul>
      </div>
      `,
      setup(){
        const {ref,reactive}=Vue
        const inputValue=ref('')
        const list=reactive([])
        const input=(e)=>{
          inputValue.value=e.target.value
        }
        function add(value){
          list.unshift(value)
          inputValue.value=''
        }
        return{ inputValue,input,add,list}
      }
    });

    app.component('', {
      template:``
    });
   
    const vm = app.mount('#root');
  </script>
</body>

</html>